<template>
  <div class="orderConfirm">
    <div class="logo">
      <img src="@/assets/logo.png" alt="">
    </div>
    <div class="t1">{{lang('payAmt')}}</div>
    <div class="amt">
      <span>￥</span>{{query.price}}
    </div>
    <div class="desc">
      <div class="list">
        <span>{{lang('order')}}</span>{{query.order_no}}
      </div>
      <div class="list">
        <span>{{lang('proName')}}</span>{{query.product_name?decodeURI(query.product_name):''}}
      </div>
      <div class="list">
        <span>{{lang('orderAmt')}}</span>{{query.price}} ￥
      </div>
      <div class="list">
        <span>{{lang('cuser_code')}}</span>{{query.cuser_code}}
      </div>
    </div>
    <van-button type="primary" :loading="loading" :loading-text="payOk?'获取支付结果...':'支付中...'" @click="pay">{{lang('btn')}}</van-button>
  </div>
</template>

<script>
import {api_orderSubmit,api_orderResult} from "../api";
import {Toast,Dialog} from "vant";

export default {
  name: 'orderConfirm',
  data() {
    return {
      query:{
        ...this.$route.query
      },
      loading:false,
      payOk:false,
    }
  },
  mounted() {

  },
  methods: {
    lang(str) {
      return str?this.$t('orderConfirm.'+str):''
    },
    pay(){
      // this.$router.push('/paySuccess')
      this.loading=true
      this.payOk=false
      api_orderSubmit({
        "product_id": this.query.product_id,
        "cuser_id": this.query.cuser_id,
        "order_no": this.query.order_no,
        "cuser_code": this.query.cuser_code,
        "timestamp": this.query.timestamp,
        "sign": this.query.sign,
        "code": this.query.code,
        "serial_number": this.query.serial_number,
      }).then((res={}) => {
        if(res.nonce_str){
          this.startPay(res)
        }else {
          setTimeout(() => {
            this.loading=false
          },300)
        }
      }).catch(() => {
        setTimeout(() => {
          this.loading=false
        },300)
      })
    },
    startPay(obj){
      const onBridgeReady =()=> {
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
          "appId": obj.app_id,     //公众号ID，由商户传入
          "timeStamp": obj.timestamp,     //时间戳，自1970年以来的秒数
          "nonceStr": obj.nonce_str,      //随机串
          "package": obj.package_val,
          "signType": obj.sign_type,     //微信签名方式：
          "paySign": obj.pay_sign //微信签名
        },
        (res) =>{
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            this.payOk=true
            this.getResult()
          }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
            this.loading=false
            Toast('支付取消')
          }else if(res.err_msg == "get_brand_wcpay_request:fail"){
            this.loading=false
            Dialog({title:'支付失败'})
          }else {
            this.loading=false
          }
        });
      }
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      } else {
        onBridgeReady();
      }
    },
    getResult(){
      api_orderResult({
        product_id:this.query.product_id,
        cuser_id:this.query.cuser_id,
        order_no:this.query.order_no,
        cuser_code:this.query.cuser_code,
        timestamp:this.query.timestamp,
        sign:this.query.sign,
      }).then((res={}) => {
        if(res.order_status==='PAID'){
          this.loading=false
          this.$router.push({
            path:'/paySuccess',
            query:this.query
          })
        }else if(res.order_status==='CANCELLED'){
          this.loading=false
          Dialog({title:'订单已取消'})

        }else if(res.order_status==='UN_PAY'){
          setTimeout(this.getResult,500)

        }else if(res.order_status==='CLOSE'){
          this.loading=false
          Dialog({title:'订单已关闭'})
        }else {
          this.loading=false
        }
      }).catch(() => {
        this.loading=false
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.orderConfirm{
  padding: 0 34px;
  .logo{
    padding: 60px 0 26px;
    text-align: center;
    img{
      width: 65px;
      height: 65px;
    }
  }
  .t1{
    text-align: center;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
  }
  .amt{
    margin-top: 20px;
    font-family: FZMeiHei-M07S;
    font-weight: 400;
    font-size: 31px;
    color: #000000;
    span{
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 24px;
      color: #000000;
      padding-right: 7px;
    }
  }
  .desc{
    margin-top: 45px;
    padding-top: 22px;
    border-top: 1px solid rgba(54, 56, 62, 0.14);
    .list{
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 14px;
      line-height: 18px;
      padding: 2px 0;
      color: #000000;
      text-align: left;
      span{
        display: inline-block;
        vertical-align: middle;
        color: #787878;
        min-width: 60px;
        margin-right: 15px;
      }
    }
  }
  .van-button{
    margin: 70px auto;
    width: 174px;
    text-align: center;
    line-height: 50px;
    background: #07C061;
    border-radius: 6px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 15px;
    color: #FFFFFF;
  }
}
</style>
